<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="{{ asset('echarts/echarts/dist/echarts.js') }}"></script>
</head>
<body>

<style>
    /*.box-header.with-border{*/
        /*display: none;*/
    
    /*}*/
    /*#filter-box{*/
        /*display: none;*/
    /*}*/
    /*.box-header.with-border.filter-box{*/
        /*display: block;*/
    /*}*/

</style>
{{--<div class="box-header with-border filter-box">--}}
    {{--<form action="http://cloud.test/admin" class="form-horizontal" pjax-container="" method="post">--}}
        {{--<div class="row">--}}
            {{--<div class="col-md-10">--}}
                {{--<div class="box-body">--}}

                    {{--<div class="fields-group">--}}
                        {{--<div class="form-group">--}}
                            {{--<div class="col-sm-4">--}}
                                {{--<div class="input-group input-group-sm">--}}
                                    {{--<div class="input-group-addon">--}}
                                        {{--<i class="fa fa-calendar"></i>--}}
                                    {{--</div>--}}
                                    {{--<input type="text" class="form-control" id="created_at_start" placeholder="添加时间" name="departments[created_at][start]" value="">--}}
                                    {{--<span class="input-group-addon" style="border-left: 0; border-right: 0;">-</span>--}}
                                    {{--<input type="text" class="form-control" id="created_at_end" placeholder="添加时间" name="departments[created_at][end]" value="">--}}
                                {{--</div>--}}
                            {{--</div>--}}
                            {{--<div class="col-sm-2">--}}
                                {{--<div class="input-group input-group-sm">--}}
                                    {{--<input type="text" class="form-control goods_name" placeholder="商品名" name="goods_name" value="">--}}
                                {{--</div>--}}
                            {{--</div>--}}
                            {{--<div class="col-sm-4">--}}
                                {{--<div class="input-group input-group-sm">--}}
                                    {{--<div class="btn-group pull-left">--}}
                                        {{--<button class="btn btn-info submit btn-sm"><i class="fa fa-search"></i>&nbsp;&nbsp;搜索</button>--}}
                                    {{--</div>--}}
                                    {{--<div class="btn-group pull-left " style="margin-left: 10px;">--}}
                                        {{--<a href="http://cloud.test/admin" class="btn btn-default btn-sm"><i class="fa fa-undo"></i>&nbsp;&nbsp;重置</a>--}}
                                    {{--</div>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</div>--}}

                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
        {{--</div>--}}


    {{--</form>--}}
{{--</div>--}}

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '呼出次数排行（按呼出次数统计）'
        },
        tooltip: {},
        legend: {
            x:'center',      //可设定图例在左、右、居中
            y:'bottom',     //可设定图例在上、下、居中
            data:['呼出次数','接听次数']
        },
        xAxis: {
            data: ["衬衫,tst","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '呼出次数',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        },{
            name: '接听次数',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }],
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>